<template>
  <div class="power_icon">
    <div class="out">
      <div class="tail">
        <div class="percent">

        </div>
      </div>
      <div class="head"></div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, watch, ref } from 'vue';

export default defineComponent({
  name: 'power',
  components: {},
  props: {
    percent: {
      type: Number,
      default: 0
    }
  },
  setup(porps) {
    // let percent: string = porps.percent + '%' as string;
    // let color: string = porps.percent >= 30 ? '#0CB883' : '#E72727' as string;
    let percent = ref(porps.percent + '%');
    let color = ref(porps.percent >= 30 ? '#0CB883' : '#E72727');
    watch(
      () => porps.percent, (newValue) => {
        percent.value = newValue + '%';
        color.value = newValue >= 30 ? '#0CB883' : '#E72727';
      }
    )
    return {
      percent,
      color
    };
  },
});
</script>
<style lang="less" scoped>
.power_icon {
  .out {
    display: flex;
    align-items: center;

    .tail {
      padding: 1px;
      width: 20px;
      height: 12px;
      border: 2px solid v-bind(color);

      .percent {
        height: 100%;
        width: v-bind(percent);
        background-color: v-bind(color);
      }
    }

    .head {
      width: 2px;
      height: 4px;
      background: v-bind(color);
    }
  }
}
</style>
